<template>
  <router-layout>
    <div class="container">
      <AddTheme1></AddTheme1>
      <div class="search">
        <form action="/">
          <van-search
            v-model="listQuery.proposal_title"
            show-action
            shape="round"
            placeholder="请输入要搜索的内容"
            @search="onSearch"
            @cancel="onCancel"
          ></van-search>
        </form>
      </div>
      <div class="wapper-box">
        <div class="van-hairline--top tab-box">
          <van-tabs v-model="active" color="#01A0EF" @click="onClick">
            <van-tab v-for="item in titleList" :key="item.id">
              <div slot="title" v-cloak>
                {{item.title}}
                <van-icon v-if="item.title!='综合'" class="iconfont icon-paixu"/>
              </div>
              <!-- 暂无数据组件 -->
              <Nodata v-if="isNoData"></Nodata>
              <div v-else class="content-container">
                <van-list class="content-list" v-model="loading" :finished="finished" @load="onLoad" :offset="0">
                  <van-cell v-for="it in activeDataList" :key="it.id" :border="false">
                    <div class="content-box" @click="go_detail(it)">
                      <van-row class="container-header" type="flex" justify="space-between">
                        <van-col class="van-ellipsis">
                          <div class="name">
                            <div class="avatar">
                              <img :src="it.portrait?it.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'" width="100%" alt="">
                            </div>
                            <div class="username">
                              <p class="nams"> {{ it.create_username }} </p>
                              <p class="times"> {{ it.create_time }} </p>
                            </div>
                          </div>
                          <h2 class="content-title one-txt-cut">{{ it.proposal_title }}</h2>
                          <!-- <p class="content-middle" v-html="it.article_content"></p> -->
                        </van-col>
                        <van-col>
                          <div class="content-img" v-if="it.file_path">
                            <img :src="it.file_path" width="100%" alt>
                          </div>
                        </van-col>
                      </van-row>
                      <div class="content-middle">
                        <van-row type="flex" justify="space-between" align="center">
                          <van-col>
                            <span v-if="!it.top_status==0">
                              <van-tag type="primary">置顶</van-tag>
                            </span>
                          </van-col>
                          <van-col>
                            <i class="title-user">
                              <span class="iconfont icon-dianzan"></span>
                              <span>{{it.like_nums || 0}}</span>
                            </i>
                            <i class="title-user">
                              <span class="iconfont icon-xiaoxi"></span>
                              <span>{{it.comment_nums || 0}}</span>
                            </i>
                          </van-col>
                        </van-row>
                      </div>
                    </div>
                  </van-cell>
                </van-list>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </router-layout>
</template>

<script>
import Backtop from "../public/backtop/Backtop"; //导入回到顶部
import AddTheme1 from "../public/mask/AddTheme1"; // 导入发表主题
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import { proposal_list, proposal_addBrowseNum } from "@/api/proposal";
import TitleItem from "../../components/public/title/title";
import { clacTime } from "@/utils";

export default {
  name: "proposalHome",
  components: { Backtop, AddTheme1, Nodata, TitleItem },
  computed: {
    activeDataList: function () {
      return this.dataList.filter(function (item) {
        return item.close_status == 1
      })
    }
  },
  data() {
    return {
      loading: false,
      isNoData: false,
      finished: false,
      active: 0,
      titleList: [
        {
          id: 1,
          title: "综合"
        },
        {
          id: 2,
          title: "阅读量"
        },
        {
          id: 3,
          title: "点赞"
        }
      ],
      dataList: [],
      listQuery: {
        start: 0,
        order_by: "",
        current: 1,
        limit: 5,
        moule_id: 1,
        company_id: localStorage.getItem("companyId") || 1
      },
      perId: "",
      total: ""
    };
  },
  methods: {
    //切换tab栏
    onClick(index, title) {
      if (index == 0) {
        this.listQuery.order_by = "";
      }
      if (index == 1) {
        this.listQuery.order_by = "read";
      }
      if (index == 2) {
        this.listQuery.order_by = "like";
      }
      this.initList();
    },
    //搜索
    onSearch() {
      this.initList();
    },
    //取消搜索
    onCancel() {
      this.initList();
    },
    //跳转到详情页
    go_detail(it) {
      this.perId = it.id;
      this.$router.push({
        path: "/proposalDetail",
        query: {
          id: it.id,
          name: "proposal"
        }
      });
    },

    //获取数据
    async initList() {
      let query = Object.assign({}, this.listQuery);
      let res = await proposal_list(query);
      let result = res.data;
      if (result.status == 100) {
        result.data.rows.forEach(ele => {
          ele.create_time = clacTime(ele.create_time)
        });
        this.dataList = result.data.rows;
        if (!result.data.results) {
          this.isNoData = true;
        }
      }
      this.loading = false;
      if (result.data.results <= result.data.rows.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.initList();
      }, 1000);
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style lang="scss" scoped>
@import "proposalHome";
</style>
